<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stepper步进器</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <!-- 当前样式 -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="selector_container">
        <div class="prev"></div>
        <div class="selector">
            <a href="#a" class="active">A</a>
            <a href="#b">B</a>
            <a href="#c">C</a>
            <a href="#d">D</a>
            <a href="#e">E</a>
            <a href="#f">F</a>
            <a href="#g">G</a>
            <a href="#h">H</a>
            <a href="#i">I</a>
            <a href="#j">J</a>
            <a href="#k">K</a>
            <a href="#l">L</a>
            <a href="#m">M</a>
            <a href="#n">N</a>
            <a href="#o">O</a>
            <a href="#p">P</a>
            <a href="#q">Q</a>
            <a href="#r">R</a>
            <a href="#s">S</a>
            <a href="#t">T</a>
            <a href="#u">U</a>
            <a href="#v">V</a>
            <a href="#w">W</a>
            <a href="#x">X</a>
            <a href="#y">Y</a>
            <a href="#z">Z</a>
        </div>
        <div class="next"></div>
    </div>
    <script src="../../../layui/layui.js"></script>
    <script>
        layui.config({
                base: '../'
            });
            layui.use('stepper', function () {
                var slider = layui.stepper;
                slider.stepper('.selector_container', '.selector', '.prev', '.next', 180)
            });
    </script>
</body>

</html>